<template>
  <div class="box" ref="box">
    <div class="left">
      <div class="left-search">
        <el-input
          suffix-icon="el-icon-search"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <!--左侧div内容-->
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
        accordion
        v-for="(item, index) in tagTreeList"
        :key="index"
      >
        <el-collapse-item :title="item.title" :name="item.title">
          <el-tree
            :data="item.data"
            ref="leftTree"
            class="tree tag-tree"
            node-key="id"
            draggable
            :props="defaultProps"
            :allow-drop="returnFalse"
            :allow-drag="allowDrag"
            @node-drag-start="handleDragstart"
            @node-drag-end="handleDragend"
          >
            <div class="custom-tree-node" slot-scope="{ node }">
              <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                :open-delay="0"
                v-if="node.isLeaf"
              >
                <div>
                  <p>标签名称:{{ node.label }}</p>
                  <p>最近更新时间:20210506</p>
                  <p>更新周期:按自然周</p>
                  <p>客户数:20210506</p>
                  <p>标签口径:20210506</p>
                </div>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text">收藏</el-button>
                  <el-button type="text" size="mini">标签详情</el-button>
                </div>

                <span slot="reference">{{ node.label }}</span>
              </el-popover>
              <span v-else>{{ node.label }}</span>
            </div>
          </el-tree>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="resize" title="收缩侧边栏">⋮</div>
    <div class="mid">
      <div class="mid-attenion">
        <p>标签规则设置</p>
        <p>
          注意：① 融合业务场景标签请设置号码归属省；② 客户群最后去各体系交集
        </p>
      </div>
      <!--右侧div内容-->
      <el-tabs
        v-model="editableTabsValue"
        type="card"
        editable
        @edit="handleTabsEdit"
      >
        <el-tab-pane
          :key="item.name"
          v-for="item in editableTabs"
          :label="item.title"
          :name="item.name"
          :closable="true"
        >
          <div class="tag-title">
            <div>
              客群规模：
              <span class="targetCount">193671623</span>
              <span> 刷新 </span>
            </div>
            <p>清空规则</p>
          </div>
          <el-tree
            :data="treeData2"
            :expand-on-click-node="false"
            class="tree custom-tree"
            node-key="id"
            ref="rightTree"
            draggable
            default-expand-all
            :allow-drop="allowDrop"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <div class="custom-tree-node-left">
                <i
                  class="union-type"
                  :style="{
                    display: node.childNodes.length > 1 ? 'block' : 'none',
                    top: node.childNodes.length * 18 + 'px'
                  }"
                  @click="toggleUnionType(data)"
                  >{{ unionTypeTxt[data.unionType] || '且' }}</i
                >
                <span class="el-tree-node__label tag-name">{{
                  node.label
                }}</span>
                <span v-if="node.label !== '全量标签'">
                  <el-select
                    v-model="data.calType"
                    placeholder="请选择"
                    size="mini"
                  >
                    <el-option label="=" value="="> </el-option>
                    <el-option label="≠" value="!="> </el-option>
                  </el-select>
                </span>
                <span
                  class="el-tree-node__label tag-label"
                  v-if="node.label !== '全量标签'"
                  >Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Aliquid fugit ea voluptates nobis iste non quod numquam
                  repudiandae esse, nisi est a quos delectus voluptatum animi
                  cupiditate earum tenetur et.</span
                >
                <span class="delete-btn" v-if="node.label !== '全量标签'">
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-circle-close"
                    @click="() => removeNode(node, data)"
                  >
                  </el-button>
                </span>
              </div>
              <span v-if="node.label !== '全量标签'">
                <span class="special-tag">周期</span>
                <el-popover
                  placement="bottom"
                  width="200"
                  trigger="click"
                  content="当前用户以20210525为例,每期输出客群人数会根据输出日期发生变动
"
                >
                  <span slot="reference">1593687.7万</span>
                </el-popover>
                <!-- <span></span> -->
              </span>
            </span>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      editableTabsValue: '1',
      editableTabs: [
        {
          title: '标签',
          name: '1'
        }
      ],
      tabIndex: 2,
      activeNames: [],
      visible: false,
      tagTreeList: [
        {
          title: '我的收藏标签',
          data: [
            {
              tagCode: 'consume',
              tagName: '消费属性',
              tagType: null,
              tagClass: 1,
              parentCode: '00000',
              fullId: null,
              children: [
                {
                  tagCode: 'consume_2001',
                  tagName: '视频',
                  tagType: null,
                  tagClass: 2,
                  parentCode: 'consume',
                  fullId: null,
                  children: [
                    {
                      tagCode: '3153',
                      tagName: '视频会员',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_31001',
                      tagName: '最近一次消费时间\n',
                      tagType: 2,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_31002',
                      tagName: '最近一次消费内容\n',
                      tagType: 2,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_31003',
                      tagName: '会员新体系',
                      tagType: null,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_41001',
                          tagName: '联合会员业务',
                          tagType: null,
                          tagClass: 4,
                          parentCode: 'consume_31003',
                          fullId: null,
                          children: [
                            {
                              tagCode: 'consume_51001',
                              tagName: '新型联合会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_41001',
                              fullId: null,
                              children: []
                            },
                            {
                              tagCode: 'consume_51002',
                              tagName: '存量联合会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_41001',
                              fullId: null,
                              children: []
                            }
                          ]
                        },
                        {
                          tagCode: 'consume_41002',
                          tagName: '合作业务',
                          tagType: null,
                          tagClass: 4,
                          parentCode: 'consume_31003',
                          fullId: null,
                          children: [
                            {
                              tagCode: 'consume_51003',
                              tagName: '合作业务',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_41002',
                              fullId: null,
                              children: []
                            }
                          ]
                        },
                        {
                          tagCode: 'consume_41003',
                          tagName: '自有业务',
                          tagType: null,
                          tagClass: 4,
                          parentCode: 'consume_31003',
                          fullId: null,
                          children: [
                            {
                              tagCode: 'consume_51004',
                              tagName: '自有业务-自有会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_41003',
                              fullId: null,
                              children: []
                            },
                            {
                              tagCode: 'consume_51005',
                              tagName: '券包',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_41003',
                              fullId: null,
                              children: []
                            },
                            {
                              tagCode: 'consume_51006',
                              tagName: '自有业务-其他',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_41003',
                              fullId: null,
                              children: []
                            }
                          ]
                        }
                      ]
                    },
                    {
                      tagCode: 'consume_31004',
                      tagName: '有券用户',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_31005',
                      tagName: '有效通看券张数标签',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_31006',
                      tagName: '近30天消费通看券张数',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_31007',
                      tagName: '当前在订视频通看券连续包用户',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_31008',
                      tagName: '最近一次退订通看券连续包用户-日期',
                      tagType: 2,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_31009',
                      tagName: '最近一次订购按次通看券包日期',
                      tagType: 2,
                      tagClass: 3,
                      parentCode: 'consume_2001',
                      fullId: null,
                      children: []
                    }
                  ]
                },
                {
                  tagCode: 'consume_2002',
                  tagName: '音乐',
                  tagType: null,
                  tagClass: 2,
                  parentCode: 'consume',
                  fullId: null,
                  children: [
                    {
                      tagCode: 'consume_32001',
                      tagName: '最近一次消费时间\n',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2002',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_32002',
                      tagName: '音乐会员新体系',
                      tagType: null,
                      tagClass: 3,
                      parentCode: 'consume_2002',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_42001',
                          tagName: '联合会员业务',
                          tagType: null,
                          tagClass: 4,
                          parentCode: 'consume_32002',
                          fullId: null,
                          children: [
                            {
                              tagCode: 'consume_52001',
                              tagName: '新型联合会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_42001',
                              fullId: null,
                              children: []
                            },
                            {
                              tagCode: 'consume_52002',
                              tagName: '存量联合会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_42001',
                              fullId: null,
                              children: []
                            }
                          ]
                        },
                        {
                          tagCode: 'consume_42002',
                          tagName: '自有业务',
                          tagType: null,
                          tagClass: 4,
                          parentCode: 'consume_32002',
                          fullId: null,
                          children: [
                            {
                              tagCode: 'consume_52003',
                              tagName: '自有会员-白金会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_42002',
                              fullId: null,
                              children: []
                            },
                            {
                              tagCode: 'consume_52004',
                              tagName: '自有会员-其他会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_42002',
                              fullId: null,
                              children: []
                            },
                            {
                              tagCode: 'consume_52005',
                              tagName: '自有业务-其他',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_42002',
                              fullId: null,
                              children: []
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  tagCode: 'consume_2003',
                  tagName: '数媒',
                  tagType: null,
                  tagClass: 2,
                  parentCode: 'consume',
                  fullId: null,
                  children: [
                    {
                      tagCode: 'consume_33001',
                      tagName: '最近一次消费时间\n',
                      tagType: 2,
                      tagClass: 3,
                      parentCode: 'consume_2003',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_33002',
                      tagName: '阅读会员新体系',
                      tagType: null,
                      tagClass: 3,
                      parentCode: 'consume_2003',
                      fullId: null,
                      children: [
                        {
                          tagCode: 'consume_43001',
                          tagName: '联合会员业务',
                          tagType: null,
                          tagClass: 4,
                          parentCode: 'consume_33002',
                          fullId: null,
                          children: [
                            {
                              tagCode: 'consume_53001',
                              tagName: '新型联合会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_43001',
                              fullId: null,
                              children: []
                            },
                            {
                              tagCode: 'consume_53002',
                              tagName: '存量联合会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_43001',
                              fullId: null,
                              children: []
                            }
                          ]
                        },
                        {
                          tagCode: 'consume_43002',
                          tagName: '合作业务',
                          tagType: null,
                          tagClass: 4,
                          parentCode: 'consume_33002',
                          fullId: null,
                          children: [
                            {
                              tagCode: 'consume_53003',
                              tagName: '合作业务',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_43002',
                              fullId: null,
                              children: []
                            }
                          ]
                        },
                        {
                          tagCode: 'consume_43003',
                          tagName: '自有业务',
                          tagType: null,
                          tagClass: 4,
                          parentCode: 'consume_33002',
                          fullId: null,
                          children: [
                            {
                              tagCode: 'consume_53004',
                              tagName: '自有业务-自有会员',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_43003',
                              fullId: null,
                              children: []
                            },
                            {
                              tagCode: 'consume_53005',
                              tagName: '自有业务-其他',
                              tagType: 1,
                              tagClass: 5,
                              parentCode: 'consume_43003',
                              fullId: null,
                              children: []
                            }
                          ]
                        }
                      ]
                    }
                  ]
                },
                {
                  tagCode: 'consume_2004',
                  tagName: '动漫',
                  tagType: null,
                  tagClass: 2,
                  parentCode: 'consume',
                  fullId: null,
                  children: [
                    {
                      tagCode: '3152',
                      tagName: '动漫会员',
                      tagType: 2,
                      tagClass: 3,
                      parentCode: 'consume_2004',
                      fullId: null,
                      children: []
                    }
                  ]
                },
                {
                  tagCode: 'consume_2006',
                  tagName: '视频彩铃',
                  tagType: null,
                  tagClass: 2,
                  parentCode: 'consume',
                  fullId: null,
                  children: [
                    {
                      tagCode: 'basic_videoring_4001',
                      tagName: '视频彩铃基础会员包用户',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2006',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'basic_videoring_4002',
                      tagName: '视频彩铃包月用户',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2006',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'basic_videoring_4003',
                      tagName: '视频彩铃专属订阅包用户',
                      tagType: 1,
                      tagClass: 3,
                      parentCode: 'consume_2006',
                      fullId: null,
                      children: []
                    },
                    {
                      tagCode: 'consume_3602',
                      tagName: '近60天音乐app内视频彩铃内容订购次数',
                      tagType: 3,
                      tagClass: 3,
                      parentCode: 'consume_2006',
                      fullId: null,
                      children: []
                    }
                  ]
                }
              ]
            }
          ]
        },
        { title: '标签' },
        { title: '省专标签-云南' },
        { title: '省专标签-北京' }
      ],
      defaultProps: {
        children: 'children',
        label: 'tagName'
      },
      // right
      unionTypeTxt: {
        and: '且',
        or: '或'
      },
      treeData2: [
        {
          id: 2,
          label: '全量标签',
          unionType: 'and',
          calType: '='
        }
      ]
    }
  },
  mounted() {
    this.dragControllerDiv()
  },
  methods: {
    handleTabsEdit(targetName, action) {
      if (action === 'add') {
        let newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        let tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
      }
    },
    // 折叠面板选中
    handleChange(data) {
      console.log(data)
    },
    handleDragstart(node, event) {
      if (node.isLeaf) {
        node.data.label = node.data.tagName
        node.data.calType = '='
        node.data.unionType = 'and'
        node.data.type = 'normal'
        // 如果是叶子节点才能拖拽
        this.$refs.rightTree[0].$emit('tree-node-drag-start', event, {
          node: node
        })
      }
    },
    // 左侧拖动栏
    dragControllerDiv: function () {
      const resize = document.getElementsByClassName('resize')
      const left = document.getElementsByClassName('left')
      const mid = document.getElementsByClassName('mid')
      const box = document.getElementsByClassName('box')
      const activeColor = '#818181' // 拖动块选中的颜色
      const defaultColor = '#d6d6d6' // 拖动块默认的颜色
      const leftMinWidth = 120 // 左边区域的最小宽度为300px
      const rightMinWidth = 800 //右边区域最小宽度为600px
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          //颜色改变提醒
          resize[i].style.background = activeColor
          const startX = e.clientX
          resize[i].left = resize[i].offsetLeft
          // 鼠标拖动事件
          document.onmousemove = function (e) {
            const endX = e.clientX
            let moveLen = resize[i].left + (endX - startX) // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            const maxT = box[i].clientWidth - resize[i].offsetWidth // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

            if (moveLen < leftMinWidth) moveLen = leftMinWidth
            if (moveLen > maxT - rightMinWidth) moveLen = maxT - rightMinWidth

            resize[i].style.left = moveLen // 设置左侧区域的宽度

            for (let j = 0; j < left.length; j++) {
              left[j].style.width = moveLen + 'px'
              mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px'
            }
          }
          // 鼠标松开事件
          document.onmouseup = function () {
            //颜色恢复
            resize[i].style.background = defaultColor
            document.onmousemove = null
            document.onmouseup = null
            resize[i].releaseCapture && resize[i].releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          }
          resize[i].setCapture && resize[i].setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false
        }
      }
    },
    // 左侧允许拖拽
    allowDrag(node) {
      return node.isLeaf
    },
    handleDragend(draggingNode, endNode, position, event) {
      // 插入一个空节点用于占位
      let emptyData = {
        id: +new Date(),
        children: []
      }
      this.$refs.leftTree[0].insertBefore(emptyData, draggingNode)
      this.$refs.rightTree[0].$emit('tree-node-drag-end', event)
      this.$nextTick(() => {
        // 如果是移动到了当前树上，需要清掉空节点
        if (this.$refs.leftTree[0].getNode(draggingNode.data)) {
          this.$refs.leftTree[0].remove(draggingNode)
        } else {
          // 如果移动到了别的树上，需要恢复该节点，并清掉空节点
          let data = JSON.parse(JSON.stringify(draggingNode.data))
          this.$refs.leftTree[0].insertAfter(
            data,
            this.$refs.leftTree[0].getNode(emptyData)
          )
          this.$refs.leftTree[0].remove(emptyData)
        }
      })
    },
    // 右侧允许放置
    allowDrop(moveNode, inNode, type) {
      if (inNode.data.calType) {
        return type === 'inner'
      }
    },
    returnFalse() {
      return false
    },
    // 移除右侧节点
    removeNode(node) {
      this.$refs.rightTree[0].remove(node)
    },
    // 切换且和或
    toggleUnionType(data) {
      const deepUnionType = (tree) => {
        if (tree.$treeNodeId === data.$treeNodeId) {
          tree.unionType = tree.unionType === 'and' ? 'or' : 'and'
        }
        if (tree.children && tree.children.length) {
          tree.children.forEach((el) => {
            deepUnionType(el)
          })
        }
      }
      deepUnionType(this.treeData2[0])
    }
  }
}
</script>

<style >
body {
  margin: 0;
  padding: 0;
}
/* 拖拽相关样式 */
/*包围div样式*/
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
/*左侧div样式*/
.left {
  width: 300px; /*左侧初始化宽度*/
  height: 100%;
  background: #ffffff;
  /* float: left; */
  overflow: auto;
}
.left-search {
  padding: 10px 0;
}
/*拖拽区div样式*/
.resize {
  cursor: col-resize;
  /* float: left; */
  position: relative;
  top: 45%;
  background-color: #d6d6d6;
  border-radius: 5px;
  margin-top: -10px;
  width: 10px;
  height: 50px;
  background-size: cover;
  background-position: center;
  /*z-index: 99999;*/
  font-size: 32px;
  color: white;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
  color: #444444;
}
/*右侧div'样式*/
.mid {
  /* float: left; */
  width: 68%;
  /*右侧初始化宽度*/
  overflow-x: auto;
  overflow-y: auto;
  /* flex: 1; */
  height: 100%;
  background: #fff;
  box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
  padding: 0 20px;
}
.el-tabs__nav .el-tabs__item:nth-child(1) span {
  display: none;
}
/* right */

.tag-title {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
}
.tag-title span {
  margin: 0 5px;
}
.targetCount {
  color: rgba(236, 137, 32, 100);
}

.tag-tree,
.custom-tree {
  width: 100%;
}
/* .tree {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  font-size: 16px;
  overflow-x: hidden;
} */
/* 树形结构节点添加连线 */
.custom-tree .el-tree-node {
  position: relative;
  padding-left: 16px;
  margin: 5px 0;
}

.custom-tree .el-tree-node__children {
  padding-left: 16px;
}

.custom-tree .el-tree-node :last-child:before {
  height: 38px;
}

.custom-tree .el-tree > .el-tree-node:before {
  border-left: none;
}

.custom-tree.el-tree > .el-tree-node:after {
  border-top: none;
}

.custom-tree .el-tree-node:before {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.custom-tree > .el-tree-node:before {
  display: none;
}

.custom-tree .el-tree-node:after {
  content: '';
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}
/* .custom-tree .el-tree-node__expand-icon.is-leaf {
  display: none;
} */
::v-deep.custom-tree .el-tree-node .el-tree-node__content {
  padding-left: 0 !important;
  height: 32px !important;
}
.custom-tree .el-tree-node .el-tree-node__content .expanded {
  pointer-events: none;
  z-index: 1;
}

.custom-tree .el-tree-node:before {
  border-left: 1px dashed #b8b9bb;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.custom-tree .el-tree-node:after {
  border-top: 1px dashed #b8b9bb;
  height: 20px;
  top: 12px;
  width: 28px;
}
.custom-tree-node {
  width: 100%;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-tree-node .custom-tree-node-left {
  display: flex;
  align-items: center;
}
.custom-tree-node .union-type {
  display: none;
  content: '且';
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  background: #ccc;
  color: #606266;
  position: absolute;
  left: 18px;
  top: 0;
  z-index: 1;
  font-style: normal;
}

.custom-tree-node span {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
.custom-tree-node .delete-btn {
  margin-left: 5px;
}
.custom-tree-node .tag-name,
.tag-label {
  height: 20px;
  line-height: 20px;
  padding: 4px 8px;
  background: #a2c4f9;
}
.custom-tree-node .tag-label {
  max-width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-tree-node .el-select--mini {
  width: 60px;
  margin: 0 5px;
}
/* .custom-tree-node .el-select--mini .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
} */
.custom-tree-node .special-tag {
  border: 1px solid rgba(53, 32, 244, 100);
  color: rgba(53, 32, 244, 100);
  display: inline-block;
  padding: 0 5px;
  margin-right: 5vh;
}
</style>
